<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌入extjs</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="vue.js"></script>
    <script src="axios.min.js"></script>
    <!-- <script type="text/javascript" src="/plug-in/glweb/internal/common/js/jquery-1.5.1.min.js?ver=1.0.1"></script>
    <script type="text/javascript" src="/plug-in/glweb/base/yui/ext3_1_1/ext-base.js" ></script>
    <script type="text/javascript" src="/plug-in/glweb/base/yui/ext3_1_1/ext-all.js" ></script>
    <script type="text/javascript" src="/plug-in/glweb/base/yui/ext3_1_1/lb-ext.js" ></script>
    <script type="text/javascript" src="/plug-in/glweb/base/yui/ext3_1_1/lb-app.js" ></script>
    <link rel="stylesheet" type="text/css" href="/plug-in/glweb/base/yui/ext3_1_1/resource/css/lb-ext-all.css"/>
    <link rel="stylesheet" href="/plug-in/glweb/base/css/themes/default/xtheme.css" type="text/css"/>
    <link rel="stylesheet" href="/plug-in/glweb/base/css/themes/default/lbtheme.css" type="text/css"/> -->
</head>
<body>
    <div id="root">
        <div ref="ref1"></div>
        <div ref="container" id="container" v-cloak>
        </div>
        <!-- <component :is="currentTemplate"></component> -->
        <button @click="addTemplate">添加模板</button>
        <!-- <iframe src="http://10.29.192.39:8001/plug-in/common/transfer.jsp?ObjName=ComposedPag_GXGXFP&Title=共享关系分配&Target=/UIProcessor?Table=ComposedPag_GXGXFP"></iframe> -->
    </div>
   <script type="text/javascript">
    // https://zhuanlan.zhihu.com/p/25820636
       function runScript(script){
         return new Promise((reslove, rejected) => {
            // 直接 document.head.appendChild(script) 是不会生效的，需要重新创建一个
            const newScript = document.createElement('script');
            // 获取 inline script
            newScript.innerHTML = script.innerHTML;
            // 存在 src 属性的话
            const src = script.getAttribute('src');
            if (src) newScript.setAttribute('src', src);

            // script 加载完成和错误处理
            newScript.onload = () => reslove();
            newScript.onerror = err => rejected();
            document.head.appendChild(newScript);
            document.head.removeChild(newScript);
            if (!src) {
                // 如果是 inline script 执行是同步的
                reslove();
            }
        })
}

    function setHTMLWithScript(container, rawHTML){
        container.innerHTML = rawHTML;
        const scripts = container.querySelectorAll('script');

        return Array.prototype.slice.apply(scripts).reduce((chain, script) => {
            return chain.then(() => runScript(script));
        }, Promise.resolve());
    }
    new Vue({
        el:'#root',
        data: {
            id:1,
            url:'',
            dhtml:'',
            currentTemplate: null
        },
        beforeCreate() {
            // getHtml ()
        },
        beforeMount() {
            console.log("beforeMount");
            // axios.post('http://10.29.192.39:8001/UIProcessor?Table=ComposedPag_GXGXFP')
            //     .then((res) => {
            //         const container = this.$refs.container;
            //         container.innerHTML=res.data
           
            // }).catch( (e)=> {
            //     console.log(e);
            // }) 
        },
        methods: {
           
            updateMa() {
             
            },
            addTemplate() {
                axios.post('http://10.29.192.39:8001/plug-in/common/transfer.jsp?ObjName=ComposedPag_GXGXFP&Title=共享关系分配&Target=/UIProcessor?Table=ComposedPag_GXGXFP')
                .then((res) => {
                    const container = this.$refs.container;
                    // container.append = res.data;
                    // document.getElementById('container').innerHTML=res.data;
                    // const node = this.$createElement('div'); // 调用 $createElement() 创建一个 div 节点
                    // node.innerHTML = res.data;
                    // container.append(node);

                    // var Profile = Vue.extend({
                    //     template:res.data
                    // })
      
                    // const comtn = new comt;
                    // new Profile.$mount('#container')
                    // $('#container').html(res.data)
                    container.innerHTML = res.data;
                    // 加载和执行script代码
                    setHTMLWithScript(container, res.data)
                    // container.appendChild(comtn.$el)
            }).catch( (e)=> {
                console.log(e);
            }) 
            // 动态添加一个模板
           
    }
        },
        // mounted() {
        //     const vvm = this
        //          // 加载旧页面
        //         axios.post('http://10.29.192.39:8001/plug-in/common/transfer.jsp?ObjName=ComposedPag_GXGXFP&Title=共享关系分配&Target=/UIProcessor?Table=ComposedPag_GXGXFP')
        //         .then((res) => {
               
        //     }).catch( (e)=> {
        //         console.log(e);
        //     }) 
        // },
    })
     
   </script>
</body>
</html>